<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="plr20">
			<view class="pt30 ">
				<view class="flex alcenter mt10">
					<image src="../../static/image/tssp.png" class="wt15 h15"></image>
					<view class="chengse ft14">{{$t('bico.W694')}}</view>
				</view>
				<view class="mt40 ">
					<!-- 邮箱验证码 -->
					<view class="alcenter bdb_myblue mb10">
						<view class="flex">
							<input class="identifying-code-input" type="number" v-model="code" @input="codeInput" :placeholder="$t('login').r_pemailcode" />
							<view class="ft10 pt5 identifying-code-btn" :class="{ actived: getCodeState, 'active': !getCodeState }" @click="getEmailCode" :disabled="!getCodeState">
							  <view class="title" v-if="getCodeState">{{$t('login').get_code}}</view>
							  <view class="title" v-if="!getCodeState">{{$t('login').still_rest}}{{ countDown }} s</view>
							</view>
						</view>
						<view class="ft10 pt5 chengse" v-if="email_length">{{$t('login').r_code_length}}</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex alcenter flex1">
							<input type="password" v-model="oldpassword" class="h40 lh40  flex1 input-uni" :placeholder="$t('login').p_old_pwd">
							<view class="ft10 pt5 chengse" v-if="verifyPwd1"></view>
						</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex alcenter flex1">
							<input type="password" v-model="password" @input="passwordInput1" class="h40 lh40  flex1 input-uni" :placeholder="$t('login').p_new_pwd">
							<view class="ft10 pt5 chengse" v-if="verifyPwd1">{{$t('login').p_len}}</view>
						</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex alcenter flex1">
							<input type="password" v-model="re_password" @input="passwordInput2" class="h40 lh40  flex1 input-uni" :placeholder="$t('login').p_confirmPwd">
							<view class="ft10 pt5 chengse" v-if="verifyPwd2">{{$t('login').p_notsame}}</view>
						</view>
					</view>
					<view class="mt50 bgBlue radius4 ptb10 white ft14 tc mb10" @tap="confirm()">{{$t('login').e_chongzhi}}</view>
				</view>
			</view>
			<view class="fixed my_layer pos_l0b0 w100 ht100" v-if="isShowCodeLayer" @tap="isShowCodeLayer=false;">
				<view class="fixed pos_l0b0 bgHeader w100 pt20 pb10 plr10" @tap.stop>
					<view class="ptb14 tc blue2 ft14 bold" v-if="loginActive==0">{{$t('login').r_sms}}</view>
					<view class="ptb14 tc blue2 ft14 bold" v-else>{{$t('login').r_smsemail}}</view>
					<view class="flex bgwhite alcenter bdb_blue mb10 mt20" >
						<input type="text" v-if="loginActive==0" v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pmobilecode">
						<input type="text" v-else v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pemailcode">
						<view class="ml10 plr10 white bgBlue ptb5 radius4" @tap="getCode">
							<text v-if="!hasSend">{{$t('login').r_send}}</text>
							<text v-else>{{second}}s</text>
						</view>
					</view>	
					<view class="mt30 bgBlue radius4 ptb10 white ft14 tc mb10" @tap.stop="confirm">{{$t('login').r_next}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import country from '@/common/country.js'
	import {commonPhoneCode,commonGetMsg,commonGetEmailCode,pwd} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				oldpassword:'',
				loginActive:0,
				user_string:sessionStorage.getItem('accountEmail'),
				getCodeState: true,
				TIME_COUNT: 60,
				timer: null,
				countDown: '',
				password:'',
				re_password:'',
				code:'',
				array: country,
				index: 0,
				area_code:'+1',
				hasSend:false,
				second:60,
				isRemember:false,
				verifyPwd:false,
				email_length:false,
				verifyPwd1:false,
				verifyPwd2:false,
				isShowCodeLayer:false,
				timeInterval:'',
				lang:'',
				nationality:'United States',
				accountEmail:sessionStorage.getItem('accountEmail')
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		mounted() {
		    //this.getPhone();
		},
		onLoad() {
			this.lang=uni.getStorageSync('lang');
			this.$utils.setTheme(this.theme);
			uni.setNavigationBarTitle({
				title:this.$t('login').e_pwd
			})
		},
		methods:{
			// 获取邮箱验证码
			getEmailCode() {
				this.$utils.initData({url:commonGetEmailCode,type:'POST',
					data:{
						email: this.user_string,
						type:2
					}},(res,msg)=>{
					//60秒之后获取验证码
					if (!this.timer) {
					  this.countDown = this.TIME_COUNT;
					  this.getCodeState = false
					  this.timer = setInterval(() => {
						if (this.countDown > 0 && this.countDown <= this.TIME_COUNT) {
						  this.countDown--;
						} else {
						  this.getCodeState = true;
						  clearInterval(this.timer);
						  this.timer = null;
						}
					  }, 1000)
					}
					
					// setTimeout(()=>{
					// 	this.$utils.showLayer(this.$t('bind').sendSuccess);
					// },100)
				})
			},
			// 区号选择
			bindPickerChange(e){
				this.index=e.target.value;
				this.phoneItem=this.array[this.index];
				this.area_code=this.phoneItem.code;
				this.nationality=this.phoneItem.area;
			},
			//获取手机前缀
			getPhone(){
			    this.$utils.initData({url:commonPhoneCode,type:'POST'},(res,msg)=>{
					this.array=res;
			        this.phoneItem=res[0];
			    })
			},
			// 获取验证码
			getCode(){
				if(this.timeInterval) return;
				if(this.loginActive==0){
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
					this.$utils.initData({url:commonGetMsg,type:'POST',
						data:{
							phone:this.user_string,
							code:this.area_code,
							type:this.phoneItem.type
						}},(res,msg)=>{
							setTimeout(()=>{
								this.$utils.showLayer(msg);
							},100)
				
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}else{
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
					this.$utils.initData({url:commonGetMsg,type:'POST',
						data:{
							email:this.user_string,
							code:this.area_code,
							type:this.phoneItem.type
						}},(res,msg)=>{
							setTimeout(()=>{
								this.$utils.showLayer(msg);
							},100)
				
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}
			},
			// 下一步
			goNext(){
				if(this.loginActive==1){
					// 邮箱登录
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
				}else{
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
				}
				this.isShowCodeLayer=true;
				this.hasSend=false;
				this.timeInterval='';
				this.code='';
			},
			// 密码框输入判断提示
			passwordInput(e){
				this.hasSend=false;
				if(e.target.value.length<6){
					this.verifyPwd=true;
				}else{
					this.verifyPwd=false;
				}
			},
			codeInput(e){
				if(e.target.value.length<6){
					this.email_length=true;
				}else{
					this.email_length=false;
				}
			},
			passwordInput1(e){
				if(e.target.value.length<6){
					this.verifyPwd1=true;
				}else{
					this.verifyPwd1=false;
				}
			},
			passwordInput2(e){
				if(e.target.value!=this.password){
					this.verifyPwd2=true;
				}else{
					this.verifyPwd2=false;
				}
			},
			// 确定
			confirm(){
				if(!this.code){
					return this.$utils.showLayer(this.$t('login').r_pemailcode)
				}
				if(this.code.length<6){
					return this.$utils.showLayer(this.$t('login').r_code_length)
				}
				if(!this.password){
					return this.$utils.showLayer(this.$t('login').p_new_pwd)
				}
				if(!this.oldpassword){
					return this.$utils.showLayer(this.$t('login').p_old_pwd)
				}
				if(this.password.length<6){
					return this.$utils.showLayer(this.$t('login').p_simple)
				}
				if(this.password!=this.re_password){
					return this.$utils.showLayer(this.$t('login').p_inputagain)
				}
				var data={
					'newPwd':this.password,
					'msgOrOldPwd':this.oldpassword,
					'confirmPwd':this.re_password,
					'type':'LOGIN',
					'email':this.user_string,
					'msg': this.code,
				}
				var url=pwd
				
				this.$utils.initDataToken({url,data,type:'get'},(res,msg)=>{
					// this.$utils.showLayer(msg);
					setTimeout(()=>{
						this.$utils.showLayer(msg);
					},100)
					this.isShowCodeLayer=false;
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.identifying-code-btn {
	  width: 300rpx;
	  height: 72rpx;
	  line-height: 72rpx;
	  
	  text-align: center;
	  color: #fff;
	}
	.title{
		// padding-top: 10px;
	}
	.actived{
		background: #9acaef;
	}
	.active {		  
	  background-color: #ccc;
	}
	.identifying-code-input {
	  width: 462rpx;
	  height: 72rpx;
	  display: block;
		
	}
	.chengse {
	    color: #05cfa4;
	    margin: 0 2vw;
	}
	.ft14 {
	    font-size: 12px;
	}
	.vh100 {
	    min-height: 100vh;
	    margin: 0 2vw;
	}
	uni-view {
	    box-sizing: border-box;
	    line-height: 1.8;
	}
	.ft19 {
	    font-size: 4vw;
	}
	
	
</style>
